<template>
  <div>
    <p class="title">{{ num }}</p>
    <button @click="handleClick">按钮</button>
    <input type="text" />
    <!-- 3. 使用组件 -->
    <MyComponent />
    <MyComponent></MyComponent>
    <my-component></my-component>
    <my-component />

    <MyComponent2 />
  </div>
</template>

<script>
// 1. 引入组件
import MyComponent from "./views/MyComponent";

export default {
  name: "App", // 组件名字（组件名字不写，默认以文件名补充）
  // 组件的data必须写成函数形式：原因是将来组件复用时，多个复用的组件不会共享一份数据（某个组件修改数据，其他组件是不变的）
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    handleClick() {
      this.num++;
    },
  },
  // 2. 局部注册组件
  components: {
    MyComponent,
  },
};
</script>

<style>
.title {
  color: pink;
}
</style>
